<template>
  <Header />
  <div class="ranking-container">
    <h1>热度排行</h1>
    <el-table :data="rankings" style="width: 100%">
      <el-table-column prop="top" label="排名" width="80" />
      <el-table-column prop="title" label="目的地" />
      <el-table-column prop="hot" label="热度" />

      <!-- <el-table-column >
        <template #default="scope">
          <span style="color: blue;" @click="lookMore()">查看更多>>></span>
        </template>
      </el-table-column> -->
    </el-table>
    <el-divider></el-divider>
    <el-button type="primary" @click="refreshRankings">刷新排行</el-button>
  </div>
  <Footer />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CityList } from '@/api'
import type { HotTopForm } from '@/types/tuil'


const rankings = ref<HotTopForm[]>()

onMounted( async ()=>{
  const res1 = await CityList.getHotTop()
  rankings.value = res1
})

const lookMore =()=>{
  console.log("123");
  
}

const refreshRankings = () => {
  // 处理刷新排行的逻辑
  console.log('刷新排行')
}
</script>

<style scoped>
.ranking-container {
  padding: 20px;
}

h1 {
  margin-bottom: 20px;
  font-size: 28px;
  color: #333;
}

.el-table {
  border-radius: 8px;
  overflow: hidden;
}

.el-table th {
  background-color: #f5f5f5;
  color: #333;
}

.el-table td {
  color: #666;
}

.el-button {
  margin-top: 20px;
}
</style> 